<template>
    <div class="video2">
      <Banner></Banner>
      <mainContent catname="视频播放">
        <div slot="menu_list">
          <dl>
            <dt class="menu_dt" :style="{backgroundImage: 'url(' + this.$util.storage.get('menu_bg')+ ')'}"><span class="iconfont icon-shijian"></span>视频播放</dt>
          </dl>
        </div>



        <div slot="inner_content" style="padding-top: 60px;box-sizing: border-box">
          <div class="page_con">

             <div class="title_video">{{title}}</div>

              <div class="video_box">
                <video  style="width: 100%;height: 100%;object-fit: cover" id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto"
                       :poster="logo"
                >
                  <source type="application/x-mpegURL">
                </video>
              </div>
          </div>
        </div>
      </mainContent>
      <MainMenu></MainMenu>
      <footerBar></footerBar>

    </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
    export default {
        name: "Video2",
        data(){
           return{

             title:'',//视频标题
             playOptions: {
               controls: true,
               sources: [
                 {

                   src: 'http://www.szlt.com/11.mp4',
                 }
               ],
               controlBar: {                     // 配置控制栏
                 timeDivider: false, // 时间分割线
                 durationDisplay: true, // 总时间
                 progressControl: false, // 进度条
                 customControlSpacer: false, // 未知
                 fullscreenToggle: true // 全屏
               },
               //自动播放属性,muted:静音播放
               autoplay: "false",
               //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
               preload: "auto",
               //设置视频播放器的显示宽度（以像素为单位）
               // width: "375",
               // //设置视频播放器的显示高度（以像素为单位）
               // height: "auto"
             },
             logo:'',
           }
        },
        components:{
          Banner,
          MainMenu,
          footerBar,
          mainContent,
        },
        created(){
          // console.log('logo:',this.$util.storage.get("logo_img"));
          this.logo=this.$util.storage.get("logo_img");
          this.title=this.$route.query.title;
        },
       mounted(){
          this.getVideoUrl();
       },
        methods:{
          initVideo() {
            //初始化视频方法
            let myPlayer = videojs(myVideo, this.playOptions);
          },
          getVideoUrl(){
              let sources = this.$util.storage.get("videourl");
              console.log('视频资源地址:',sources);
               this.playOptions.sources[0].src=sources;
               this.initVideo();
          },//获得视频资源

        },

    }
</script>

<style scoped>
  .video2{
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }

  .title_video{
    color: black;
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    font-family: 微软雅黑;
  }

  .video_box{
    width: 900px;
    height: 550px;
    margin: 0 auto;
    border-radius: 3%;
    overflow: hidden;
    margin-top: 20px;
  }

</style>
